<template>
  <div class="disTriCom">
    <el-form :model="disTriForm" :rules="disTriRules" v-loading="disTriLoading" label-width="100px" ref="disTriRefs" class="disTriCls">
      <el-form-item label="商城用户：" prop="headImage">
        <div class="upLoadPicBox">
          <div v-if="disTriForm.headImage" class="pictrue">
            <el-image ref="disTriLargePreView" class="imgHover" :src="$uploadURL(disTriForm.headImage)" :preview-src-list="[$uploadURL(disTriForm.headImage)]"></el-image>
            <div class="upload_cover_preview">
              <i @click.stop="largePreview('disTriLargePreView')" class="iconfont icon-yanjing"></i>
              <i @click.stop="delLarge" class="el-icon l-upload el-icon-delete"></i>
            </div>
          </div>
          <div @click="toModel" v-else class="upLoad"><i class="el-icon l-upload el-icon-camera-solid"></i></div>
        </div>
      </el-form-item>
      <el-form-item label="配送员名称：" prop="name">
        <el-input v-model="disTriForm.name" type="text" size="small" placeholder="请输入配送员名称"></el-input>
      </el-form-item>
      <el-form-item label="手机号码：" prop="mobile">
        <el-input v-model="disTriForm.mobile" type="text" size="small" placeholder="请输入手机号码"></el-input>
      </el-form-item>
      <el-form-item label="配送员状态：">
        <el-radio-group v-model="disTriForm.isShow">
          <el-radio :label="1">显示</el-radio>
          <el-radio :label="0">隐藏</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="创建时间：" v-if="disTriForm.createDateUTC">
        <el-input v-model="disTriForm.createDateUTC" size="small" disabled type="text" placeholder="创建时间"></el-input>
      </el-form-item>
      <div class="subBtnWid">
        <el-button size="mini" type="primary" @click="subAddDisTri('disTriRefs')" :loading="loadingBtn">提交</el-button>
      </div>
    </el-form>
  </div>
</template>

<script>
  import {
    getDisTriClerkApi,
    postDeliveryClerk as postDisTriCreatApi,
    putDeliveryClerk as putDisTriEditApi
  } from '@/api/setting';

  export default {
    name: 'Index',
    props: {
      isEdit: {
        type: [String, Number],
        default: 0
      },
      id: {
        type: [String, Number],
        default: 0
      }
    },
    data() {
      const validateMobile = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('请填写手机号'));
        } else if (!/^1[3456789]\d{9}$/.test(value)) {
          callback(new Error('手机号格式不正确!'));
        } else {
          callback();
        };
      };
      return {
        disTriForm: {
          userId: '',
          headImage: '',
          name: '',
          mobile: '',
          isShow: 1,
          createDateUTC: ''
        },
        disTriRules: {
          name: [
            { required: true, message: '请填写配送员名称', trigger: 'blur' }
          ],
          mobile: [
            { required: true, validator: validateMobile, trigger: 'blur' }
          ],
          headImage: [
            { required: true, message: '请选择用户', trigger: 'change' }
          ]
        },
        disTriLoading: false,
        loadingBtn: false
      };
    },
    created() {
      if (this.isEdit == 1 && this.id) this.getList();
    },
    methods: {
      /**
       * 打开选择用户
       */
      toModel() {
        const _this = this;
        _this.$modal({
          componentProps: {
            isAgent: 1
          },
          component: (resolve) => require(['@/components/userTable'], resolve),
          props: {
            title: '选择用户',
            customClass: 'zdyDialogCls disTriComDialogCls',
            width: '100%',
            closeOnClickModal: false
          },
          methods: {
            retUserTab(row) {
              _this.$set(_this.disTriForm, 'headImage', row.headImage);
              _this.$set(_this.disTriForm, 'userId', row.id);
              _this.$refs.disTriRefs.validateField('headImage');
            }
          }
        });
      },
      /**
       * 删除图片
       */
      delLarge() {
        this.$set(this.disTriForm, 'userId', '');
        this.$set(this.disTriForm, 'headImage', '');
      },
      /**
       * 大图预览
       */
      largePreview(ref) {
        this.$refs[ref].clickHandler();
      },
      /**
       * 获取所有配送人信息
       */
      getList() {
        this.$set(this, 'disTriLoading', true);
        getDisTriClerkApi(this.id).then(res => {
          this.$set(this, 'disTriForm', {
            userId: res.userId,
            headImage: res.headImage,
            name: res.name,
            mobile: res.mobile,
            isShow: res.isShow,
            createDateUTC: this.$util.uctTimeFileter(res.createDateUTC)
          });
          this.$set(this, 'disTriLoading', false);
        }).catch(() => {
          this.$set(this, 'disTriForm', {});
          this.$set(this, 'disTriLoading', false);
        });
      },
      /**
       * 提交
       */
      subAddDisTri(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.$set(this, 'loadingBtn', true);
            if (this.isEdit == 1 && this.id) {
              // 编辑
              putDisTriEditApi({
                userId: this.disTriForm.userId,
                headImage: this.disTriForm.headImage,
                name: this.disTriForm.name,
                mobile: this.disTriForm.mobile,
                isShow: this.disTriForm.isShow
              }, this.id).then(() => {
                this.$message.success('编辑成功');
                this.$emit('getDisTriList');
                this.$emit('close');
                this.$set(this, 'loadingBtn', false);
              }).catch(() => {
                this.$set(this, 'loadingBtn', false);
              });
            } else {
              // 新增
              postDisTriCreatApi({
                userId: this.disTriForm.userId,
                headImage: this.disTriForm.headImage,
                name: this.disTriForm.name,
                mobile: this.disTriForm.mobile,
                isShow: this.disTriForm.isShow
              }).then(() => {
                this.$message.success('添加成功');
                this.$emit('getDisTriList');
                this.$emit('close');
                this.$set(this, 'loadingBtn', false);
              }).catch(() => {
                this.$set(this, 'loadingBtn', false);
              });
            };
          } else {
            return false;
          }
        });
      }
    }
  }
</script>

<style scoped>

</style>

<style lang="scss">
  .el-dialog.disTriComDialogCls {
    max-width: 1000px;
  }
</style>
